想法 & 历史

在大二上学期的时候，我想过有一个自己的网站，里面可以记录自己。当时还不知道有“博客”这个东西，向同学请教后，我才知道了这个名词。在建站初期，自己还是小白的时候，也是这个同学教的我，在此对他表示感谢。当时在腾讯云靠新用户优惠买了个一个月的服务器，还有域名，备案也是自己弄的。在备案没有通过期间，自己没有找到合适的 CMS（Content Manage System，内容管理系统），就在拼多多上找建站的订单，大多都是源码，于是就找到了第一个自己比较喜欢的样式，然后自己改了改，就正式上线了。

网页样式我记得，但是找不到源码了，我就画了一个，类似于下面这样。

第一个网页的源码.webp

第二个接触到的框架就是 halo 框架，用了一个月。当时请教了同学之后，为了不过多麻烦他，我自己在网上搜教程，搜视频，最后找到了一个以 halo 框架作为 CMS 的视频。看了视频效果，我很满意，于是我就跟着他操作。选用的主题是Heo设计的，然后小孙同学开发的 theme-halo-hao 主题。但正如[浅尝Halo博客框架：基础体验还一言难尽]一文中提到的，Halo 有一堆 bug，然后我那时候还是小白，连 docker 都不会，只会跟着文档走，而 Halo 的文档我又看不懂，数据也丢失了，于是就从头开始，换了另一个框架：Typecho。

Halo-Theme-Hao主题样式.webp

Typecho从过去一直用到现在，最开始在 Typecho 社区尝试过许多主题，然后在某主题站内看到了 🌸MyDiary 主题，它是收费的。我从建站到现在，每一项服务都在花钱，所以当时没有在意太多，就购入了这款主题。当时建站追求的是颜值和功能，MyDiary 主题很满足我的需求，于是第一次站点使用了此主题开始了第一次长时间的运营。

MyDiary主题.webp

再后来，MyDiary 主题作者出了新作品。刚开始价格很便宜（50左右？），还在测试版本，我也是第一批使用新主题的用户，还写了篇五千字的测评文。MyDiary 主题是固定的左右栏，我不喜欢，还尝试修改过。新主题的导航栏在上方，配色很简洁，盒子还会发光，还有很多配色，我也是被它花哨的功能吸引了。Typecho 的主题都很简单，但是新主题功能超级多，样式也有很多。在换到现在这个主题前，站点一直用的新主题，直到24年初我决定开发一个属于自己的主题。

MyLife主题.webp

和以前一样，在主题站看了好久，找到一个小众的又符合我的主题：Citizen。换上这个主题了以后，也在作者处征求了魔改的意见，作者也同意了（他说我拿去倒卖都没事），于是我也就在此主题的基础上添加了许多我喜欢的东西。

改动

我喜欢很多其他博主设计的样式：

• blog.zhheo.com 的关于界面，风格是圆角矩形，滚动的卡片。
• thyuu.com 中展示相册的封面铺满了屏幕。
• 苹果官网的站点地图。我们熟知的站点地图都是以 XML 形式展示给搜索引擎的爬虫的，而且很多博主把站点地图内展示的东西以“侧边栏”、“归档”、“内容统计”等形式呈现给读者，整体都很分散。我觉得苹果官网和大多数国内网站的站点地图一样，就把网站中所有的内链全部放到此页中，读者可以快速找到他想要的页面，而不必去导航栏或页脚处查找，极大方便读者的阅读。
• blog.bennyxguo.com 的归档页面，归档是以时间线形式呈现出来的。
• msn 的图注，用一个小线条将图片和图注连接起来。
• skywt.cn 的导航栏，有一个很明显的伸缩动作。
• guhub.cn 的主页。
• 子比主题邮件通知的样式。

于是参考着这些样式，加上思考如何把这些样式完美地融合在一起而不违和，我总耗时两星期左右，把这些样式融合到了一起。

现在的 Citizen 主题已更名为 ImQi1 主题。在看到风记星辰打算将自己的主题作为独立主题分发并起名字时，虽然我没有分发的想法，但是我也觉得，仪式感要有。于是我开始重构代码，尝试让 imqi1 这五个字符遍布各处。

现在你所看到的imqi1.com，就是我自己的得意之作。为什么得意，因为我完成了开头时提到的梦想：想过有一个自己的网站，并且还是自己写的。或许学计算机专业的幸福感就来自于此吧。

成果

• 全新的关于界面。其中，大多数模仿自 skywt.cn，小部分模仿自 blog.zhheo.com/about.html。
• 全新的导航栏，完全模仿自 skywt.cn。
• 模仿着thyuu.com中图片分类的封面展示，我也做了一个符合本站风格的“摄影”类封面展示，其他分类则不再显示封面。

摄影类文章封面展示.webp

经过了一个小时的优化，桌面端LightHouse跑分几乎满分，但移动端略低一些。

桌面端LightHouse跑分.webp

细节

除此之外，我还在网站里设置了很多小细节，可能有很多人没有注意到。

• 浏览器控制台中的欢迎提示；
• 关于页面中的站点截图中，展示的站点使用的主题模式取决于当前使用的主题；

还有一部分则是站点中莫名出现的字符，其实它们都有自己的意义：

• 首页中头像右侧第一行文字“棋 / Qi1 / .”，其实都是我各个平台的昵称，最后的“.”也是昵称。
• imqi1，这个字符组合实际上是 I'm Qi1，即“我是棋”的意思。因为 1 和 Qi 同韵母，且某些平台不允许短昵称，所以我就将它们连到了一起。

回答

有很多人问过我关于建站的一些问题，我很乐意和大家分享。在此我分享一下我的网页都运用了什么技术。

本站域名托管于腾讯云，加速服务是腾讯云的 EdgeOne 个人版，服务器是京东云的 2H4G5M 轻量云主机，云存储则使用的是又拍云云存储。

本站的 CMS 为 Typecho，主题为魔改过的 Citizen 主题，魔改后的主题不分发也不售卖，仅个人使用。至于样式，我的样式都是参考的别人的，我感觉本站的样式可不可以参考都谈不上。

本站加速服务有 EdgeOne 和又拍云云存储提供的 CDN 服务，还有 Typecho 的基于 Redis 数据库缓存的 Tpcache 插件，以提高本站的访问速度。

本站的字体为思源宋体，代码字体为 JetBrainsMono。这两个字体都托管于又拍云云存储中，且加入了防盗链和跨域等限制，因此需要引用这两个字体的请前往官网下载。思源宋体链接 JetBrainsMono 字体链接

值得一提的是，思源宋体字体的整体文件大小很大，约2M，对于低带宽的客户端来说很不友好。目前很多网页都对字体分段加载（我也不知道具体的名词是什么），具体就是将一个字体文件拆成几十个字体文件，每个字体文件有10KB左右，然后在CSS中，给出这个字体的链接和对应的Unicode编码范围。举例：

@font-face {
    font-family: "Noto Serif SC";
    src: url(https://cdn.imqi1.com/static/notoserifsc/H4c8BXePl9DZ0Xe7gG9cyOj7mlK1SzUpCNMKEN0nmGnGv-OMEQDgKS-k5SiuioPhBdQcziZZTQ.4.woff2) format("woff2");
    unicode-range: U+1f1e9-1f1f5,U+1f1f7-1f1ff,U+1f21a,U+1f232,U+1f234-1f237,U+1f250-1f251,U+1f300,U+1f302-1f308,U+1f30a-1f311,U+1f315,U+1f319-1f320,U+1f324,U+1f327,U+1f32a,U+1f32c-1f32d,U+1f330-1f357,U+1f359-1f37e
}

@font-face {
    font-family: "Noto Serif SC";
    src: url(https://cdn.imqi1.com/static/notoserifsc/H4c8BXePl9DZ0Xe7gG9cyOj7mlK1SzUpCNMKEN0nmGnGv-OMEQDgKS-k5SiuioPhBdQcziZZTQ.5.woff2) format("woff2");
    unicode-range: U+fee3,U+fef3,U+ff03-ff04,U+ff07,U+ff0a,U+ff17-ff19,U+ff1c-ff1d,U+ff20-ff3a,U+ff3c,U+ff3e-ff5b,U+ff5d,U+ff61-ff65,U+ff67-ff6a,U+ff6c,U+ff6f-ff78,U+ff7a-ff7d,U+ff80-ff84,U+ff86,U+ff89-ff8e,U+ff92,U+ff97-ff9b,U+ff9d-ff9f,U+ffe0-ffe4,U+ffe6,U+ffe9,U+ffeb,U+ffed,U+fffc,U+1f004,U+1f170-1f171,U+1f192-1f195,U+1f198-1f19a,U+1f1e6-1f1e8
}

上面的CSS代码中，unicode-range和src是一一对应的。这样网页中只要出现了该范围的字体，CSS就会加载对应的字体文件，而不需下载全部字体文件。

计划

明天就要回沈阳了，暑期计划就是搭建一个类似云笔记的站点，但是不记笔记了（因为不再学新知识了）。这个笔记里记录一些常用库的用法，然后把它们的库做一个镜像，加快访问速度。

预想的样子：

标题：JQuery

内容：jQuery is a fast, small, and feature-rich JavaScript library...

jQuery的用法：$(选择器).方法(参数)，如改变 CSS 样式：$("#some-element").css("some-style", "some-value")

类似于上面这样吧。

写在最后

我觉得，学习计算机专业最大的成就感就来自于，可以将自己的想法在计算机中变成现实。这次有了自己的主题，我很高兴，我在其中尝试了很多没有尝试过的新事物。最让我觉得方便的，就是我给网页加了个 PWA。这里的“写在最后”，就是我用手机编写的。感谢代码给我的生活中增添了如此多的乐趣。